<template>
  <div class="result">
    <div class="chat-wrap">
      <div class="title">你的成绩表</div>
      <div class="res-chart" ref="res_chart"></div>
      <div class="page-wrap">
        <div
          class="page-left page-item"
          @click="changePage(0)"
        >
          <span>上一页</span>
        </div>
        <div class="page-item">
          {{ currentIndex }}
        </div>
        <div
          class="page-right page-item"
          @click="changePage(1)"
        >
          <span>下一页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: [],
      currentIndex: 1,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    //得到数据
    async getdata() {
      const uid = JSON.parse(localStorage.getItem('user')).uid;
      console.log(uid)
      const res = await this.$http.get(`http://localhost:3000/getScore?uid=${uid}`);
      console.log(res,'uid');
      for (let i = 0; i < res.data.data.length; i++) {
        this.allData.push({
          x: '第' + (i + 1) + '次',
          y: res.data.data[i].score,
        });
      }
      console.log(this.allData);
      this.initChart();
    },
    //初始化图表
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.res_chart);
      console.log(this.chartInstance);
      let xDataArr = this.getXYdata("x");
      let yDateArr = this.getXYdata("y");
      const initOption = {
        // title: {
        //     text: '历史成绩记录',
        //     textStyle: {
        //         color: 'red',
        //     },
        //     borderWidth: 2,
        //     borderColor: 'blue',
        //     left: 10,
        //     top: -10
        // },
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            // dataView: {}
            magicType: {
              type: ["bar", "line"],
            },
          },
        },
        xAxis: {
          tepy: "category",
          data: xDataArr,
        },
        yAxis: {
          tepy: "value",
          name: '分数',
          // alignTicks :true,
        },
        series: [
          {
            type: "bar",
            data: yDateArr,
            name: JSON.parse(localStorage.getItem('user')).username,
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值",
                },
              ],
            },
            label: {
              show: true,
            },
            barWidth: "40%",
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },

    //获取指定页的x轴数据和y轴数据
    getXYdata(str) {
      let res = [];
      let i = (this.currentIndex - 1) * 5;
      let end = i + 5;
      for (i; i < end && i < this.allData.length; i++) {
        res.push(this.allData[i][str]);
      }
      return res;
    },

    //改变页码
    changePage(flag) {
      if (flag === 0) {
        if (this.currentIndex > 1) {
          this.currentIndex--;
        }
      } else {
        if (this.currentIndex * 5 < this.allData.length) {
          this.currentIndex++;
        }
      }
      this.updataChart();
    },

    //更新图表数据
    updataChart() {
      let xDataArr = this.getXYdata("x");
      let yDateArr = this.getXYdata("y");
      const dataOption = {
        xAxis: {
          tepy: "category",
          data: xDataArr,
        },
        series: [
          {
            data: yDateArr,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
  },
};
</script>

<style lang="less" scoped>
.result {
  width: 1200px;
  border: 1px solid #ccc;
  margin: 0 auto;
  // border: 1px solid #ccc;
  // background-color: #fff;
  border-radius: 15px;
  .chat-wrap {
    padding: 20px;
    .title {
      padding: 5px;
      height: 40px;
      width: 120px;
      margin-bottom: 20px;
      margin-left: 60px;
      text-align: center;
      line-height: 30px;
      color: #32ccbc;
      font-size: 18px;
    }
    .res-chart {
      margin: 0 auto;
      width: 600px;
      height: 500px;
      border: 1px solid #ccc;
    }
  }
  .page-wrap {
    width: 200px;
    margin: 20px auto;
    //   border: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    user-select: none;
    .page-item {
      border: 1px solid #ccc;
      width: 30px;
      padding: 4px;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-content: center;
    }
    .page-left {
      width: 60px;
    }
    .page-right {
      width: 60px;
    }
    .active {
      background-color: #ccc;
    }
  }
}
</style>